<template>
    <!-- 打开柜子详情 -->
    <div class="grids" :style="{ 'grid-template-columns': columnfr, 'grid-template-rows': rowfr }">
        <div v-for="(item, index) in totalBox" :key="index" class="box-items" :style="{
            // width: 'calc(50vw / ' + props.infos.size[0] + ')', height: 'calc(60vh / ' + props.infos.size[1] + 'vh)'
        }"
            :class="currentHighLight.findIndex((el: any) => el.position === index) !== -1 ? 'active' : ''">
            <span class="current-open" v-if="currentHighLight.findIndex((el: any) => el.position === index) !== -1">
                <el-tooltip class="box-item" effect="dark" placement="top">
                    <template #content>
                        {{ currentHighLight.filter((el:any)=>el.position === index)[0].label }}
                        
                        <span v-if="item" style="display: none;"></span>
                    </template>
                    <!-- {{ currentHighLight.filter(el=>el.po === index)[0].bookInfo.bookName }} -->
                    <span style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
                        {{ currentHighLight.filter((el:any)=>el.position === index)[0].label }}
                    </span>
                </el-tooltip>
            </span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
const emit = defineEmits(['closeBox'])

const props = defineProps<{
    infos: any
}>();


// 计算当前需要高亮的box
const currentHighLight = computed(() => {
    const params =props.infos.boxs.map((el: any) => {
        return {
            position:((props.infos.size[0]+1)-el.storey)* props.infos.size[1] -(props.infos.size[1]-el.joint)-1,
           label:el.cabinetName,
        };
    });
    return params;
})

// 柜子行数样式
const rowfr = computed(() => {
    return new Array(props.infos.size[0]).fill('1fr').join(' ');
})

// 柜子列数样式
const columnfr = computed(() => {
    return new Array(props.infos.size[1]).fill('1fr').join(' ');
})

// 柜子总格数
const totalBox = computed(() => {
    return props.infos.size[0] * props.infos.size[1];
})
</script>

<style lang="less">
.grids {
    width: 50vw;
    height: 70vh;
    top: 10vh;
    left: 10vh;
    position: absolute;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    row-gap: 10px;
    column-gap: 10px;
    background-color: grey;
    padding: 1vh 1vw;

    .box-items {
        background-color: rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        text-overflow: ellipsis;
        .current-open {
            color: #fff;
            font-size: 12px;

        }
    }

    & .active {
        background-color: red;
    }
}

.infos {
    position: absolute;
    right: 10vh;
    width: 20vw;
    height: 40vh;
    top: 20vh;
    background-color: rgb(18, 48, 98);
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 1vw;
    color: #fff;
    font-size: 12px;

    .title {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .footer {
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: center;
        bottom: 1vw;
        left: 0;
    }

    .detail {
        margin-bottom: 1vh;
    }
}
</style>